<template>
	<view :class="device.isNotchScreen ? 'x-notch-footer ' : 'x-footer'" :style="{height: device.footerHeight+'px;'}">
		<slot></slot>
	</view>
</template>

<script>
import { mapState } from 'vuex'

export default {
	name:'XFooter',
	computed: {
		...mapState(['device'])
	},
	data() {
		return {
		}
	},
	methods:{
		
	}
}
</script>

<style lang="scss" scoped>
.x-footer {
	width: 100%;
	// height: 90rpx;
	background-color: #fff;
	position: fixed;
	bottom: 0rpx;
	// z-index: 1;
	display: flex;
	padding: 8rpx 20rpx;
	align-items: center;
	justify-content: space-between;
	border-top: 2rpx solid rgba(0, 0, 0, 0.1);
}

.x-notch-footer {
	width: 100%;
	// height: 126rpx;
	background-color: #fff;
	position: fixed;
	bottom: 0rpx;
	// z-index: 1;
	display: flex;
	padding: 8rpx 20rpx 28rpx;
	align-items: center;
	justify-content: space-between;
	border-top: 2rpx solid rgba(0, 0, 0, 0.1);
}
</style>